<template>
  <view class="body-view">
    <view class="search-room-num">
      <image
        src="https://szgd-dev.tgovcloud.com/public/images/checkin/icon-search.png"
      ></image>
      <input
        class="uni-input"
        style="padding-left: 64rpx"
        placeholder="请输入姓名、身份证号"
        v-model="searchValue"
        @blur="searchRoomNum"
      />
    </view>
    <!-- 头部 -->
    <scroll-view
      class="top-menu-view"
      scroll-x="true"
      :scroll-left="scrollLeft"
    >
      <block v-for="(menuTab, index) in menuTabs" :key="index">
        <view
          class="menu-topic-view"
          v-bind:id="'tabNum' + index"
          @click="swichMenu(menuTab.value)"
        >
          <view
            :class="[
              currentTab == menuTab.value ? 'menu-topic-act' : 'menu-topic',
            ]"
          >
            <view class="menu-topic-txt">{{ menuTab.name }}</view>
            <view class="menu-topic-bottom">
              <view class="menu-topic-bottom-color"></view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <view class="record-main" ref="dataList">
      <view
        class="record"
        v-for="(item, index) in recordList"
        :key="index"
        @click="toInfoDetail(item)"
      >
        <view
          v-if="
            item.type === 'RZDJ' ||
              item.type === 'JKPC' ||
              item.type === 'XLPG' ||
              item.type === 'YXGC' ||
              item.type === 'LDDJ'
          "
        >
          <view class="record-item">
            <view class="record-item-name">{{ item.personInfo.name }}</view>
            <view
              class="record-item-status"
              :class="[`record-item-${item.type}`]"
            >
              {{ menuKeys[item.type].name }}
            </view>
          </view>
          <view class="record-item">
            <view class="record-item-title">证件号码</view>
            <view class="record-item-value">{{ item.personInfo.cardId }}</view>
          </view>
          <view class="record-item">
            <view class="record-item-title">登记人员</view>
            <view class="record-item-value">{{ item.modipers }}</view>
          </view>
          <view class="record-item">
            <view class="record-item-title">提交时间</view>
            <view class="record-item-value">{{ item.moditime }}</view>
          </view>
        </view>
        <view v-else>
          <view class="record-item">
            <view class="record-item-name">{{ item.roomNum ? item.roomNum : item.goodsName + ' ' + item.position }}</view>
            <view
              class="record-item-status"
              :class="[`record-item-${item.type}`]"
            >
              {{ menuKeys[item.type].name }}
            </view>
          </view>
          <view class="record-item">
            <view class="record-item-title">人员</view>
            <view class="record-item-value">{{ item.modipers }}</view>
          </view>
          <view class="record-item">
            <view class="record-item-title">时间</view>
            <view class="record-item-value">{{ item.moditime }}</view>
          </view>
        </view>
      </view>
      <view class="no-more" v-if="finished">{{ dataText }}</view>
    </view>
    <!-- 右边小箭头 -->
    <!-- <view class="right-arrow"><text class="iconfont icon-arrow-right-o"></text> </view>-->
    <!-- 显示区域 -->
    <!-- <swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
             <block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
                <swiper-item>
                    <scroll-view class="swiper-topic-list" scroll-y="true" @scrolltolower="loadMore(index1)">
                        <block v-for="(swiperDate2,index2) in swiperDate" :key="index2">
                            <view class="tabContent"> -->
    <!-- 展示列表内容 -->
    <!-- </view> -->
    <!-- </block> -->
    <!--</scroll-view> -->
    <!--</swiper-item> -->
    <!--</block> -->
    <!--</swiper>-->
  </view>
</template>

<script>
import _ from "lodash";
import { getData, getRecordList } from "@/api";
export default {
  data() {
    return {
      scrollLeft: 0,
      isClickChange: false,
      currentTab: "",
      dataText: "已加载全部",
      menuKeys: {
        RZDJ: { name: '入住登记' },
        JKPC: { name: '健康排查' },
        XLPG: { name: '心理评估' },
        YXGC: { name: '医学观察' },
        LDDJ: { name: '离点登记' },
        FJXS: { name: '房间消杀' },
        FJBJ: { name: '房间保洁' },
        WPA: { name: '物品保洁' },
        WPB: { name: '物品消杀' },
        WPC: { name: '物品巡检' },
      },
      // Tab分类标题
      menuTabs: [],
      // Tab切换内容
      swiperDateList: [[], [], [], [], [], [], []],
      // 接口列表模拟数据
      list: [],
      recordList: [],
      total: 0,
      pageNum: 1,
      size: 10,
      abnormalSymptoms: [],
      flag: false,
      finished: false,
      searchValue: "",
    };
  },
  onLoad() {
    this.initMenu();
  },
  onShow() {
    this.recordList = [];
    this.pageNum = 1;
    this.getDataList();
    uni.removeStorageSync('dataIsi');
    uni.removeStorageSync('dataGad7');
    uni.removeStorageSync('dataPhq9');
  },
  onHide() {
    // this.recordList = [];
    // this.total = 0;
    this.pageNum = 1;
    this.size = 10;
  },
  onReachBottom() {
    console.log("onReachBottom====");
    if (this.recordList.length < this.total) {
      this.pageNum++;
      this.getDataList();
    } else {
      this.finished = true;
    }
  },
  methods: {
    // Tab菜单处理
    initMenu() {
      let { authorities } = uni.getStorageSync("personalInfo");
      let menuTabs = [];
      authorities = authorities || [];
      authorities.forEach(t => {
        switch(t.name) {
          case '入住登记':
            menuTabs.push('RZDJ');
            break;
          case '健康评估':
            break;
          case '健康登记':
            menuTabs.push('JKPC');
            break;
          case '心理评估':
            menuTabs.push('XLPG');
            break;
          case '医学观察':
            menuTabs.push('YXGC');
            break;
          case '离点登记':
            menuTabs.push('LDDJ');
            break;
          case '消杀登记':
            menuTabs.push('FJXS', 'WPB');
            break;
          case '保洁登记':
            menuTabs.push('FJBJ', 'WPA');
            break;
          case '巡检登记':
            menuTabs.push('WPC');
            break;
        }
      })
      this.menuTabs = menuTabs.map(t => {
        return {
          value: t,
          name: this.menuKeys[t].name
        }
      })
      if (this.currentTab && menuTabs.includes(this.currentTab)) {
        this.abnormalSymptoms = [this.currentTab];
      } else if (menuTabs[0]) {
        this.abnormalSymptoms = [menuTabs[0]];
        this.currentTab = menuTabs[0];
      }
    },
    searchRoomNum() {
      this.pageNum = 1;
      this.total = 0;
      this.recordList = [];
      this.finished = false;
      this.getDataList();

      // 搜索时清除楼层选择
      // this.selectedFloor = "";

      // let hotelId = uni.getStorageSync("hotelId")
      // getData("publicRoomList", "get", { hotelId: hotelId, roomNum: this.searchValue }).then((res) => {
      //     this.roomList = res;
      // });
    },
    swichMenu: async function(current) {
      //点击其中一个 menu
      if (this.currentTab == current) {
        return false;
      } else {
        this.currentTab = current;
        this.setScrollLeft(current);
        this.recordList = [];
        this.finished = false;
        // this.btnnum = e;
        // this.$refs.dataList.scrollTop = 0;
        if (current === "") {
          this.abnormalSymptoms = this.menuTabs.map(t => t.value);
        } else {
          this.abnormalSymptoms = [current];
        }
        this.pageNum = 1;
        this.total = 0;
        this.getDataList();
      }
    },
    swiperChange: async function(e) {
      let index = e.target.current;
      this.setScrollLeft(index);
      this.currentTab = index;
    },
    setScrollLeft: async function(tabIndex) {
      let leftWidthSum = 0;
      for (var i = 0; i <= tabIndex; i++) {
        let nowElement = await this.getWidth("tabNum" + i);
        leftWidthSum = leftWidthSum + nowElement.width;
      }
      let winWidth = uni.getSystemInfoSync().windowWidth;
      this.scrollLeft = leftWidthSum > winWidth ? leftWidthSum - winWidth : 0;
    },
    getWidth: function(id) {
      //得到元素的宽高
      return new Promise((res, rej) => {
        uni
          .createSelectorQuery()
          .select("#" + id)
          .fields(
            {
              size: true,
              scrollOffset: true,
            },
            (data) => {
              res(data);
            }
          )
          .exec();
      });
    },
    loadMore: function(tabIndex) {
      console.log("正在加载更多数据。。。");
    },
    getDateList: function(tabIndex) {
      for (var i = 0; i < 1; i++) {
        var entity =
          this.menuTabs[tabIndex].name + this.swiperDateList[tabIndex].length;
        this.swiperDateList[tabIndex].push(entity);
      }
    },
    addItem() {
      uni.navigateTo({
        url: "../healthReport/add",
      });
    },
    getDataList() {
      var that = this;
      console.log("this.pageNum====", this.pageNum);
      let { hotels } = uni.getStorageSync('personalInfo') || []
      // 没有菜单权限和酒店不调接口
      if(!this.abnormalSymptoms.length || !hotels.length)return
      const data = {
        code: this.searchValue,
        pageNum: this.pageNum,
        pageSize: this.size,
        type: this.abnormalSymptoms,
      };
      uni.showLoading({
        title: '加载中',
        mask:true
      });
      getRecordList(data).then((res) => {
        console.log("res===", res);
        let recordList = this.recordList;
        uni.hideLoading();
        if (res) {
          const {
            personMoveInfoPage,
            personHealthInvestigatePage,
            personRiskAssessmentPage,
            dailyHealthPage,
            personLeavePage,
            hotelDisinfectPage,
            hotelClearnPage,
            goodsRecordFPage,
            goodsRecordSPage,
            goodsRecordTPage
          } = res;
          this.menuTabs.forEach(t => {
            switch(t.value) {
              case 'RZDJ': personMoveInfoPage && recordList.push(...personMoveInfoPage.records);
                break;
              case "JKPC": personHealthInvestigatePage && recordList.push(...personHealthInvestigatePage.records);
                break;
              case "XLPG": personRiskAssessmentPage && recordList.push(...personRiskAssessmentPage.records);
                break;
              case "YXGC": dailyHealthPage && recordList.push(...dailyHealthPage.records);
                break;
              case "LDDJ": personLeavePage && recordList.push(...personLeavePage.records);
                break;
              case "FJXS": hotelDisinfectPage && recordList.push(...hotelDisinfectPage.records);
                break;
              case "FJBJ": hotelClearnPage && recordList.push(...hotelClearnPage.records);
                break;
              case "WPA": goodsRecordFPage && recordList.push(...goodsRecordFPage.records);
                break;
              case "WPB": goodsRecordSPage && recordList.push(...goodsRecordSPage.records);
                break;
              case "WPC": goodsRecordTPage && recordList.push(...goodsRecordTPage.records);
            }
          })
        }
        this.recordList = recordList;
        // this.recordList = _.sortBy(recordList, ["moditime"]).reverse();
        this.total = res.total;
        if (recordList.length == this.total) {
          this.finished = true;
        }
        if (this.recordList.length === 0) {
          this.dataText = "暂无数据";
        } else if (recordList.length == this.total) {
          this.dataText = "已加载全部";
        }
      });
    },
    toInfoDetail(item) {
      const type = item.type;
      let assembleObj = {};
      console.log("toInfoDetail====", type, item);
      switch (type) {
        case "RZDJ":
          // 入住登记
          uni.navigateTo({
            url:
              "../checkIn/checkInDetail?item=" +
              encodeURIComponent(JSON.stringify(item)),
          });
          break;
        case "JKPC": // 健康排查
        case "XLPG": // 心理评估
          if (typeof item.personInfo.age === "object") {
            item.personInfo.age = null;
          }
          if (typeof item.personInfo.nationality === "object") {
            item.personInfo.nationality = null;
          }
          if (typeof item.personInfo.nation === "object") {
            item.personInfo.nation = null;
          }
          item.personInfo.healthRegId = item.healthRegId;
          item.personInfo.sid = item.sid;
          uni.setStorageSync("personInfo", item.personInfo);
          uni.navigateTo({
            url: "../healthInspect/index?isChange=1",
          });
          break;
        case "YXGC":
          // 医学观察
          if (typeof item.personInfo.age === "object") {
            item.personInfo.age = null;
          }
          if (typeof item.personInfo.nationality === "object") {
            item.personInfo.nationality = null;
          }
          if (typeof item.personInfo.nation === "object") {
            item.personInfo.nation = null;
          }
          item.personInfo.healthRegId = item.healthRegId;
          item.personInfo.isolateId = item.isolateId;
          item.personInfo.healthId = item.healthId;
          uni.setStorageSync("personInfo", item.personInfo);
          uni.navigateTo({
            url: "../medicalObservation/index?isChange=1",
          });
          break;
        case "LDDJ":
          // 离点登记
          uni.navigateTo({
            url:
              "../checkOut/index?item=" +
              encodeURIComponent(JSON.stringify(item)),
          });
          break;
        case "FJXS":
          // 房间消杀
          assembleObj = {
            type: "disinfect",
            title: "消杀登记",
            name: item.xsPerson,
            position: item.roomFloor + "-" + item.roomNum,
            timer: item.xsTime,
            registrationCard: item.registrationCard,
            from: "recordList",
          };
          uni.navigateTo({
            url:
              "../disinfect/index?from=recordList&item=" +
              encodeURIComponent(JSON.stringify(assembleObj)),
          });
          break;
        case "FJBJ":
          // 房间保洁
          assembleObj = {
            type: "clean",
            title: "保洁登记",
            name: item.bjPerson,
            position: item.roomFloor + "-" + item.roomNum,
            timer: item.bjTime,
            registrationCard: item.registrationCard,
            from: "recordList",
          };
          uni.navigateTo({
            url:
              "../disinfect/index?from=recordList&item=" +
              encodeURIComponent(JSON.stringify(assembleObj)),
          });
          break;
        case "WPA":
          // 物品保洁
          assembleObj = {
            type: "clean",
            title: "保洁登记",
            name: item.businessOperator,
            position: item.goodsName + ' ' + item.position,
            timer: item.businessTime,
            registrationCard: item.registrationCard,
            from: "recordList",
          };
          uni.navigateTo({
            url:
              "../disinfect/index?from=recordList&item=" +
              encodeURIComponent(JSON.stringify(assembleObj)),
          });
          break;
        case "WPB":
          // 物品消杀
          assembleObj = {
            type: "disinfect",
            title: "消杀登记",
            name: item.businessOperator,
            position: item.goodsName + ' ' + item.position,
            timer: item.businessTime,
            registrationCard: item.registrationCard,
            from: "recordList",
          };
          uni.navigateTo({
            url:
              "../disinfect/index?from=recordList&item=" +
              encodeURIComponent(JSON.stringify(assembleObj)),
          });
          break;
        case "WPC":
          // 物品巡检
          assembleObj = {
            type: "inspection",
            title: "巡检登记",
            name: item.businessOperator,
            position: item.goodsName + ' ' + item.position,
            timer: item.businessTime,
            registrationCard: item.registrationCard,
            from: "recordList",
          };
          uni.navigateTo({
            url:
              "../disinfect/index?from=recordList&item=" +
              encodeURIComponent(JSON.stringify(assembleObj)),
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.record-main {
  width: 100%;
  min-height: 85.5vh;
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  background-color: #f2f2f2;
  overflow-y: scroll;
  .record {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 26rpx 32rpx;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px rgba(229, 229, 229, 1);
    margin-top: 30rpx;
    box-sizing: border-box;
    &-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 19rpx 0;
      &-title {
        color: #999999;
        font-size: 30rpx;
      }
      &-value {
        color: #666666;
        font-size: 34rpx;
      }
      &-name {
        color: #000000;
        font-size: 36rpx;
        font-weight: bolder;
        flex: 1;
      }
      &-status {
        // color: #66dd55;
        font-size: 30rpx;
        padding: 9rpx 31rpx;
        margin-left: 32rpx;
        // border: 1px solid #66dd55;
      }
      &-error {
        color: #f15b53;
        border: 1px solid #f15b53;
      }
      &-RZDJ {
        color: #2c9af1;
        border: 1px solid #2c9af1;
      }
      &-JKPC {
        color: #13c563;
        border: 1px solid #13c563;
      }
      &-XLPG {
        color: #13c563;
        border: 1px solid #13c563;
      }
      &-YXGC {
        color: #f79672;
        border: 1px solid #f79672;
      }
      &-LDDJ {
        color: #8172f7;
        border: 1px solid #8172f7;
      }
      &-FJXS {
        color: #f79672;
        border: 1px solid #f79672;
      }
      &-FJBJ {
        color: #f79672;
        border: 1px solid #f79672;
      }
      &-WPA {
        color: #8172f7;
        border: 1px solid #8172f7;
      }
      &-WPB {
        color: #8172f7;
        border: 1px solid #8172f7;
      }
      &-WPC {
        color: #13c563;
        border: 1px solid #13c563;
      }
    }
    .health-status {
      justify-content: start;
    }
  }
  .no-more {
    color: #999999;
    font-size: 30rpx;
    margin: 20rpx 0;
    text-align: center;
    height: 80rpx;
    padding-bottom: 60rpx;
  }
}
.search-room-num {
  display: flex;
  align-items: center;
  width: 686rpx;
  height: 56rpx;
  background: #ffffff;
  border: 1rpx solid #999999;
  opacity: 1;
  border-radius: 60rpx;
  position: relative;
  margin: 30rpx auto 0;
  image {
    display: inline-block;
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    left: 10rpx;
    top: 50%;
    transform: translateY(-50%);
  }
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }
  input::placeholder {
    color: #cccccc;
    font-size: 26rpx;
  }
  ::-webkit-input-placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }

  /* Firefox 4-18 */
  :-moz-placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }

  /* Firefox 19-50 */
  ::-moz-placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }

  /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
  :-ms-input-placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }

  /* Edge (also supports ::-webkit-input-placeholder) */
  ::-ms-input-placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }

  /* CSS Working Draft */
  ::placeholder {
    color: #cccccc;
    font-size: 26rpx;
    font-weight: 500;
  }
}

/* Tab切换 */
.body-view {
  height: 100%;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  align-items: flex-start;
  justify-content: center;
}
.body-view .right-arrow {
  position: absolute;
  top: 22upx;
  right: 0upx;
  padding-left: 60upx;
  padding-right: 20upx;
  line-height: 42upx;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 60%
  );
}
.body-view .right-arrow .iconfont {
  font-size: 24upx;
  font-family: iconfont;
  color: #909399;
}
.top-menu-view {
  display: flex;
  white-space: nowrap;
  width: 100%;
  background-color: #ffffff;
  height: 86upx;
  // border-top: 1px solid #d8dbe6;
  // border-bottom: 1px solid #d8dbe6;
}

.top-menu-view .menu-topic-view {
  display: inline-block;
  white-space: nowrap;
  height: 86upx;
  position: relative;
}

.top-menu-view .menu-topic-view .menu-topic {
  margin-left: 30upx;
  margin-right: 10upx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-menu-view .menu-topic-view .menu-topic:first-child {
  margin-left: 30upx;
}
.top-menu-view .menu-topic-view:last-child .menu-topic {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-txt {
  font-size: 30rpx;
  color: #666666;
}

.top-menu-view .menu-topic-view .menu-topic .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.top-menu-view
  .menu-topic-view
  .menu-topic
  .menu-topic-bottom
  .menu-topic-bottom-color {
  width: 100%;
  height: 4upx;
}

.top-menu-view .menu-topic-view .menu-topic-act {
  margin-left: 30upx;
  margin-right: 10upx;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-menu-view .menu-topic-view:last-child .menu-topic-act {
  margin-right: 80upx;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt {
  font-size: 30upx;
  color: #3d7eff;
  font-weight: 600;
}

.top-menu-view .menu-topic-view .menu-topic-act .menu-topic-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.top-menu-view
  .menu-topic-view
  .menu-topic-act
  .menu-topic-bottom
  .menu-topic-bottom-color {
  width: 100%;
  height: 6upx;
  background: #3d7eff;
}

.swiper-box-list {
  flex: 1;
  width: 100%;
  height: auto;
  background-color: #ffffff;
}

.swiper-topic-list {
  height: 100%;
  width: 100%;
}
</style>
